<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <el-avatar :src="avatarUrl" :size="50" />
        </el-col>
        <el-col :span="20">
          <h4 style="line-height: 50px">
            欢迎{{ store.state.userInfo.username }}回来
          </h4>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>公司产品</span>
        </div>
      </template>
      <el-carousel :interval="4000" type="card" height="200px" v-if="list?.length">
        <el-carousel-item v-for="item in list" :key="item._id">
         <div :style="{backgroundImage: `url(${baseUrl}${item.productImg})`,backgroundSize:'cover'}">
          <h3 text="2xl" justify="center">{{ item.title }}</h3>
         </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed, onMounted, ref } from 'vue';
import {baseUrl} from '@public/index';
import axios from 'axios';
const list = ref();
const store = useStore();
// 当前路由的匹配记录
const avatarUrl = computed(() => (store.state.userInfo.avatar
  ? baseUrl + store.state.userInfo.avatar
  : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'));
  const getData = async () => {
  const res = await axios.get('/adminApi/product/list');
  if (res.code === 200) {
    list.value = res.data;
  }
};
onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
